<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>034-组件-自定义事件.html</title>
</head>
<body>
	<div id="app">
		<button-counter @add-total-event="addTotal()"></button-counter>	
		<button-counter @add-total-event="addTotal()"></button-counter>	
		<button-counter @add-total-event="addTotal()"></button-counter>
		<p>点击了次{{total}}</p>	
	</div>
	<template id="button-counter">
		<button @click="addCount()">点击了{{ count }}次.</button>
	</template>
</body>
<script src="js/vue.js"></script>
<script>
	Vue.component('button-counter',{
		data(){
			return {
				count:0
			}
		},
		template:'#button-counter',
		methods:{
			addCount(){
				this.count++
				this.$emit('add-total-event')
			}
		}
	})
	var vm = new Vue({
		el:'#app',
		data: {
			total:0
		},
		methods:{
			addTotal(){
				this.total++
			}
		}
	})
</script>
</html>